<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="true"
      @scroll="scroll"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> 服务通知 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty text="暂无服务通知~"></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="flex flex-col gap-2 p-4">
        <view v-for="(i, k) in dataList" :key="k" class="bg-[#FFFFFF] rounded-[.75rem] p-4 flex flex-col gap-2">
          <view class="flex flex-col gap-1">
            <view class="flex gap-2 justify-between items-center">
              <view class="font-bold text-[.9375rem] text-[#161A24] line-clamp-1"> {{ i.title }} </view>
              <image src="/static/dddr51.png" class="size-5" @click="deleteIndividual(i)" mode="aspectFill" />
            </view>
            <view class="text-[.75rem] text-[#8E9299] whitespace-nowrap">
              {{ vk.myfn.formatDateTime(i.create_time) }}
            </view>
          </view>
          <view class="text-[.875rem] text-[#5C6068]">{{ i.content }} </view>
        </view>
      </view>
    </yy-paging>
    <u-action-sheet :list="list" v-model="show" @click="sheetClick"></u-action-sheet>
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        last_id: 0, // 上次加载的ID
        show: false, // 是否显示操作菜单
        list: [{ text: '删除' }], // 操作菜单列表
        currentData: {}, // 当前选中的数据
        showModal: false
      }
    },
    onLoad(options) {
      // this.title = options.title
    },
    methods: {
      async alertConfirm() {
        let obj = {
          type: 'fw',
          ids: this.currentData.id
        }
        let res = await api.deleteMessage(obj)
        vk.toast(res.msg, 400, e => {
          this.last_id = 0
          this.$refs.paging.refresh()
        })
      },
      sheetClick() {
        this.$refs.alert.config({
          show: true,
          title: '删除提醒',
          describe: '确定要删除该服务消息吗？删除后将无法恢复。',
          cancel: '取消',
          cancelColor: '#000',
          confirm: '确定删除',
          confirmColor: '#FF3A56',
          eventType: 'deleteMessage'
        })
      },
      customBack() {
        vk.navigateBack()
      },

      deleteIndividual(i) {
        this.show = true
        this.currentData = i
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        let obj = {
          type: 'fw',
          last_id: this.last_id,
          limit
        }

        let res = await api.getMessageList(obj)
        this.last_id = res.data.last_id
        this.$refs.paging.complete(res.data.list)
      }
    }
  }
</script>

<style lang="scss" scoped></style>
